import React, { Component } from 'react'

export default class ComD extends Component {
  constructor() {
    super()
    this.state = {
      val1: '',
      val2: '',
      val3: '',
      val4: '',
      val5: [],
    }
    this.pNode = React.createRef();
    this.input = React.createRef();
  }
  changeVal1(e) {
    this.setState({
      val1: e.target.value
    })
  }
  changeVal2(e) {
    this.setState({
      val2: e.target.value
    }, ()=> {
      console.log(this.state.val2);
    })
  }
  changeVal3(e) {
    this.setState({
      val3: e.target.value
    }, ()=> {
      console.log(this.state.val3);
    })
  }
  changeVal4(e) {
    this.setState({
      val4: e.target.value
    })
  }
  changeVal5(e) {
    let arr = this.state.val5;
    if(arr.includes(e.target.value)) {
      // 如果在就删除这一项
      arr.splice(arr.indexOf(e.target.value), 1);
    }else {
      // 如果不在就添加这一项
      arr.push(e.target.value);
    }
    console.log(arr);
    this.setState({
      val5: arr
    })
  }
  // 非受控组件的处理---只读
  submitHandler(e) {
    console.log(this.input.current.value);
    // 阻止默认事件，不让页面刷新
    e.preventDefault()
  }
  componentDidMount() {
    console.log(this.pNode.current.innerHTML);
    this.pNode.current.innerHTML = 666777888999
    this.setState({
      val1: '我是input',
      val2: '我是textarea',
      val3: 'hangzhou',
      val4: 'suzhou',
      val5: ['suzhou', 'hangzhou'],
    })
  }
  render() {
    return (
      <div>
        <p ref={this.pNode}>我是ComA的子组件，我代替了ComB</p>
        <input value={this.state.val1} onChange={(e)=>this.changeVal1(e)}/>
        <br></br>
        <textarea value={this.state.val2} onChange={(e)=>this.changeVal2(e)}></textarea>
        <br></br>
        <label>请选择就业城市：</label>
        <select value={this.state.val3} onChange={(e)=>this.changeVal3(e)}>
          <option value="zhengzhou">郑州</option>
          <option value="hangzhou">杭州</option>
          <option value="suzhou">苏州</option>
          <option value="guangzhou">广州</option>
        </select>
        <br></br>
        <label>请选择就业城市：</label>
        <input checked={'zhengzhou' === this.state.val4} value="zhengzhou" type="radio" name="city" onChange={(e)=>this.changeVal4(e)} />郑州
        <input checked={'hangzhou' === this.state.val4} value="hangzhou" type="radio" name="city" onChange={(e)=>this.changeVal4(e)} />杭州
        <input checked={'suzhou' === this.state.val4} value="suzhou" type="radio" name="city" onChange={(e)=>this.changeVal4(e)} />苏州
        <input checked={'guangzhou' === this.state.val4} value="guangzhou" type="radio" name="city" onChange={(e)=>this.changeVal4(e)} />广州
        <p>您的选择是：{this.state.val4}</p>
        <br></br>
        <label>请选择就业城市：</label>
        <input checked={this.state.val5.includes('zhengzhou')} type="checkbox" value="zhengzhou" name="work" onChange={(e)=>this.changeVal5(e)} />郑州
        <input checked={this.state.val5.includes('hangzhou')} type="checkbox" value="hangzhou" name="work" onChange={(e)=>this.changeVal5(e)} />杭州
        <input checked={this.state.val5.includes('suzhou')} type="checkbox" value="suzhou" name="work" onChange={(e)=>this.changeVal5(e)} />苏州
        <input checked={this.state.val5.includes('guangzhou')} type="checkbox" value="guangzhou" name="work" onChange={(e)=>this.changeVal5(e)} />广州
        <p>您的选择是：{this.state.val5.map(item=>{
          return <span key={item}>{item}, </span>
        })}</p>
        <form onSubmit={(e)=>this.submitHandler(e)}>
          <input type="file" name="file" ref={this.input} />
          <button type="submit">submit</button>
        </form>
      </div>
    )
  }
}
